<template>
  <div class="login_page">
    <div class="loginbox">
      <span>账号：</span><input type="text" v-model="username" />
    </div>

    <div class="loginbox">
      <span>密码：</span><input type="text" v-model="password" />
    </div>

    <div class="login" @click="tologinFn">立即登录</div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { LoginApi } from "../request/api";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  components: {},

  methods: {
    tologinFn() {
      // 
      LoginApi({
        username: this.username.toString(),
        password: this.password.toString(),
      }).then((res) => {
        console.log(res);
        if(res.errCode==0){
        
          localStorage.setItem('token',res.data);
          this.$toast.success('登录成功');
          setTimeout(()=>{
            this.$router.push('/tologin')
          },1500)
          //清空账号和密码
          this.username = '';
          this.password = '';
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_page {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/images/login/login-1.jpg");
  background-size: 100%;
  position: fixed;
  left: 0;
  top: 0;
  .loginbox {
    width: 217px;
    height: 33px;
    border: 1px solid #000;
    background-color: #ffcc33;
    border-radius: 108px;
    margin: 383px auto 0;
    display: flex;
    align-items: center;
    padding-left: 21px;
    &:nth-of-type(2) {
      margin-top: 14px;
    }
    span {
      font-weight: 700;
    }
    input {
      width: 100px;
      background-color: #ffcc33;
      border: 0;
    }
  }
  .login {
    width: 160px;
    height: 42px;
    background-color: #4366fe;
    border: 1px solid #000;
    border-radius: 21px;
    margin: 73px auto 0;
    font-size: 19px;
    text-align: center;
    line-height: 42px;
    color: #fff;
  }
}
</style>
